<!DOCTYPE html>
<html>
	<head>
        <meta charset="utf-8" />
		<title>Require Vue</title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"/>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.4.2/css/bulma.min.css"/>
        <style>
            .component-fade-enter-active, .component-fade-leave-active {
              transition: opacity .3s ease;
            }
            .component-fade-enter, .component-fade-leave-to
            /* .component-fade-leave-active for <2.1.8 */ {
              opacity: 0;
            }
        </style>
	</head>
	<body>
		<div id="app" class="container is-fluid">
            <div class="tabs">
                <ul>
                    <li>Started at: {{started}}</li>
                    <router-link tag="li" active-class="is-active" to="/home"  ><a>Home          </a></router-link>
                    <router-link tag="li" active-class="is-active" to="/inner" ><a>Inner Template</a></router-link>
                    <router-link tag="li" active-class="is-active" to="/html"  ><a>HTML component</a></router-link>
                    <router-link tag="li" active-class="is-active" to="/vue"   ><a>Vue component </a></router-link>
                    <router-link tag="li" active-class="is-active" to="/async" ><a>Async loaded  </a></router-link>
                </ul>
            </div> 
            <div class="column is-half">
                <transition name="component-fade" mode="out-in">
                <keep-alive>
                    <router-view></router-view>
                </keep-alive>
                </transition>
            </div>
        </div>
		<script data-main="app" src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.3/require.js" ></script>
	</body>
</html>
